/* components */
import { BaseSelectUserOperateBarTabs, BaseSelectUserFilter } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* model */
import { BaseSelectUserTab } from '@src/component/common/BaseSelectUser/model'
/* store */
import { useBaseSelectUserStoreCurrentTabType } from '@src/component/common/BaseSelectUser/store'
import { useBaseSelectUserOptions } from '@src/component/common/BaseSelectUser/hooks/options'
/* scss */
import '@src/component/common/BaseSelectUser/components/OperateBar/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type OperateBarProps = {
  isMulti: boolean;
}

export interface OperateBarSetupState {
  
}

export enum OperateBarEmitEventNameEnum {
  Input = 'input',
}

export type OperateBarInstance = ComponentInstance & OperateBarSetupState
export type OperateBarVM = ComponentRenderProxy<OperateBarProps> & CommonComponentInstance & OperateBarInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserOperateBar,
  emits: [
    OperateBarEmitEventNameEnum.Input
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    tabs: {
      type: Array as PropType<BaseSelectUserTab[]>,
      default: () => [],
      required: true
    },
    tabValue: {
      type: String as PropType<string>,
      default: ''
    }
  },
  setup(props: OperateBarProps, { emit }) {
    
    const { isDepartmentTab, isRoleTab, isServiceProviderTab } = useBaseSelectUserStoreCurrentTabType()
    
    const { isScreenSelect } = useBaseSelectUserOptions()
    
    const isShowFilter = computed(() => {
      return isDepartmentTab.value || isRoleTab.value || isServiceProviderTab.value || isScreenSelect
    })
    
    
    return {
      isShowFilter
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserOperateBar}>
        
        <BaseSelectUserOperateBarTabs tabs={this.tabs} value={this.tabValue} is-multi={this.isMulti} />
        
        {this.isShowFilter && (
          <BaseSelectUserFilter />
        )}
        
      </div>
    )
  }
})
